<template>
  <div>
    <p>商品清单：</p>
    <div v-for="(val ,idx) in list" :key="idx">{{val.shopName}} {{val.price}}元/份</div>
    <p>请选择购买的商品</p>
    <mdx
      v-for="(val ,index) in list"
      :key="index"
      :idx="index"
      :arr="val"
      @btnjia="btnjia"
      @btnjian="btnjian"
    ></mdx>
    <p>总价为：{{sum}}</p>
  </div>
</template>

<script>
import mdx from "./components/mdx";
export default {
  components: {
    mdx,
  },
  data() {
    return {
      list: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  methods: {
    btnjia(index) {
      this.list[index].count++;
    },
    btnjian(index) {
      this.list[index].count > 0 && this.list[index].count--;
    },
  },
  computed: {
    sum() {
      return this.list.reduce((sum, obj) => (sum += obj.count * obj.price), 0);
    },
  },
};
</script>

<style>
</style>